var myChart1 = echarts.init(document.getElementById("OpeningBalance"));
var myChart2 = echarts.init(document.getElementById("CurrentPayment"));
var myChart3 = echarts.init(document.getElementById("CurrentSettlement"));
var myChart4 = echarts.init(document.getElementById("ClosingSettlement"));

$(function () {
  laikuanzucheng = 1;
  initlaikuanzuchengData();
})

function initlaikuanzuchengData() {
  const currYear = localStorage.getItem("year");
  const currMon = localStorage.getItem("month");
  const currDept = localStorage.getItem("dept");
  const username = localStorage.getItem("user");

  var obj = {
    username: username,
    budgetYear: currYear,
    budgetMonth: currMon,
    dept: currDept,
    status: 2,
    chartPage: 602,
    chartNo: 1,
  };
  ApiGet("getdata", obj, function (e) {
    // console.log(e)
    var json = JSON.parse(e);
    var chartData = json.items[0].charts;
    console.log(chartData, "chartData");
    let data = chartData[0].data;


    getOpeningBalanceChart(data[0])
    getCurrentPaymentChart(data[1]);
    getCurrentSettlementChart(data[2]);
    getClosingSettlementChart(data[3]);

  });
}

function getOpeningBalanceChart(data) {
  $(".name1").text(data.key01);
  $(".totolNum1").text(pricefmt((data.key02 / 10000).toFixed(2)));
  $(".zongxiang1").text((data.key03 * 100).toFixed(2));
  $(".junerpin1").text((data.key04 * 100).toFixed(2));
  $(".yuyan1").text((data.key05 * 100).toFixed(2));
  $(".minpin1").text((data.key06 * 100).toFixed(2));
  let junChartData = [{
      value: data.key07,
      name: '纵向'
    },
    {
      value: data.key08,
      name: '军二品'
    },
    {
      value: data.key09,
      name: '预研'
    },
    {
      value: data.key10,
      name: '民品'
    },
  ]
  let junChart = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '94%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        normal: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      color: [
        '#165DFF',
        '#50CD89',
        '#FFC107',
        '#722ED1'
      ],
      data: junChartData,
      emphasis: {
        itemStyle: {
          shadowBlur: 2,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        }
      }
    }]
  };
  myChart1.setOption(junChart);
  window.addEventListener("resize", function () {
    myChart1.resize();
  });
  $("div").resize(function () {
    myChart1.resize();
  });
}

function getCurrentPaymentChart(data) {
  $(".name2").text(data.key01);
  $(".totolNum2").text(pricefmt((data.key02 / 10000).toFixed(2)));
  $(".zongxiang2").text((data.key03 * 100).toFixed(2));
  $(".junerpin2").text((data.key04 * 100).toFixed(2));
  $(".yuyan2").text((data.key05 * 100).toFixed(2));
  $(".minpin2").text((data.key06 * 100).toFixed(2));
  let minChartData = [{
      value: data.key07,
      name: '纵向'
    },
    {
      value: data.key08,
      name: '军二品'
    },
    {
      value: data.key09,
      name: '预研'
    },
    {
      value: data.key10,
      name: '民品'
    },
  ]
  let minChart = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '94%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        normal: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      color: [
        '#165DFF',
        '#50CD89',
        '#FFC107',
        '#722ED1'
      ],
      data: minChartData,
      emphasis: {
        itemStyle: {
          shadowBlur: 2,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        }
      }
    }]
  };
  myChart2.setOption(minChart);
  window.addEventListener("resize", function () {
    myChart2.resize();
  });
  $("div").resize(function () {
    myChart2.resize();
  });
}

function getCurrentSettlementChart(data) {
  $(".name3").text(data.key01);
  $(".totolNum3").text(pricefmt((data.key02 / 10000).toFixed(2)));
  $(".zongxiang3").text((data.key03 * 100).toFixed(2));
  $(".junerpin3").text((data.key04 * 100).toFixed(2));
  $(".yuyan3").text((data.key05 * 100).toFixed(2));
  $(".minpin3").text((data.key06 * 100).toFixed(2));
  let yuyanChartData = [{
      value: data.key07,
      name: '纵向'
    },
    {
      value: data.key08,
      name: '军二品'
    },
    {
      value: data.key09,
      name: '预研'
    },
    {
      value: data.key10,
      name: '民品'
    },
  ]
  let yuyanChart = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '94%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        normal: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      color: [
        '#165DFF',
        '#50CD89',
        '#FFC107',
        '#722ED1'
      ],
      data: yuyanChartData,
      emphasis: {
        itemStyle: {
          shadowBlur: 2,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        }
      }
    }]
  };
  myChart3.setOption(yuyanChart);
  window.addEventListener("resize", function () {
    myChart3.resize();
  });
  $("div").resize(function () {
    myChart3.resize();
  });
}

function getClosingSettlementChart(data) {
  $(".name4").text(data.key01);
  $(".totolNum4").text(pricefmt((data.key02 / 10000).toFixed(2)));
  $(".zongxiang4").text((data.key03 * 100).toFixed(2));
  $(".junerpin4").text((data.key04 * 100).toFixed(2));
  $(".yuyan4").text((data.key05 * 100).toFixed(2));
  $(".minpin4").text((data.key06 * 100).toFixed(2));
  let zongxiangChartData = [{
      value: data.key07,
      name: '纵向'
    },
    {
      value: data.key08,
      name: '军二品'
    },
    {
      value: data.key09,
      name: '预研'
    },
    {
      value: data.key10,
      name: '民品'
    },
  ]
  let zongxiangChart = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '94%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        normal: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      color: [
        '#165DFF',
        '#50CD89',
        '#FFC107',
        '#722ED1'
      ],
      data: zongxiangChartData,
      emphasis: {
        itemStyle: {
          shadowBlur: 2,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        }
      }
    }]
  };
  myChart4.setOption(zongxiangChart);
  window.addEventListener("resize", function () {
    myChart4.resize();
  });
  $("div").resize(function () {
    myChart4.resize();
  });
}